import React from 'react';
import {
    View,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import Constants from '../constant/Constants';

export default class SettingItem extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={[Style.container, this.props.style]}>
                    {this.props.showTopLine ? <View style={{ height: 1, backgroundColor: Constants.COLOR.ColorLine }} /> : null}
                    <View style={Style.centerContainer}>
                        <Image style={Style.iconStyle} source={this.props.iconSource} />
                        <Text style={Style.textStyle}>{this.props.title}</Text>
                        <Image style={Style.iconStyle} source={require('../img/arrow_right.png')} />
                    </View>
                    {this.props.showBottomLine ? <View style={{ height: 1, backgroundColor: Constants.COLOR.ColorLine }} /> : null}
                </View>
            </TouchableOpacity>
        )
    };
}
const Style = StyleSheet.create({
    container: {
        height: 45,
        backgroundColor: Constants.COLOR.ColorWhite,
    },
    centerContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    iconStyle: {
        width: 45,
        height: 45,
        resizeMode: Image.resizeMode.center
    },
    textStyle: {
        flex: 1,
    }
});


